<template>
    <div class="madp-customer-group-index">
        <basic-container v-show="pageType == 0">
            <div class="madp-statistics-title">
                <span>数据概览</span>
                <el-popover placement="bottom-start" width="500" trigger="hover">
                    <div>
                        <p>1.客户群总数：所有的客户群总和</p>
                        <p>2.群客户总数：所有的客户群总和。不去重：一名客户加了两个群，记作2</p>
                        <p>3.客户群今日净增：今日新建客户群总量。无新建为0</p>
                        <p>4.群客户今日新增：今日新增客户总数量。不去重：一名客户加了两个群，记作2</p>
                        <p>5.群客户今日流失：今日新增客户总数量。不去重：一名客户退出两个群，记作2</p>
                        <p>6.今日入群客户人次：今日加入客户群的客户数量。退群后在入群。退群-1，入群+1。最小值为0</p>
                        <p>7.今日退群客户人次：退出客户群的客户数量。退群后在入群。退群-1，入群+1。最小值为0</p>
                    </div>
                    <el-button type="text" slot="reference" style="margin-left: 20px">
                        统计说明
                        <i class="el-icon-question"></i>
                    </el-button>
                </el-popover>
            </div>
            <statistics-card style="margin-bottom:20px" :cardInfo="cardInfo" :cardData="info" />
            <p class="madp-record-time">最后一次同步时间:{{ time }}</p>
            <div class="madp-search-form">
                <span>群主:</span>
                <el-input class="madp-input" v-model.trim="searchT" maxlength="20" placeholder="请输入群主"></el-input>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleSearch(1)">清空</el-button>
            </div>
            <el-table
                class="madp-table"
                :data="tableData"
                v-loading="loading"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
            >
                <el-table-column width="70" label="序号">
                    <template slot-scope="scope">
                        {{ (page.current - 1) * page.size + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="employeeName" label="持群成员"></el-table-column>
                <el-table-column prop="holdNum" label="成员持群数"></el-table-column>
                <el-table-column label="所在层级">
                    <template slot-scope="scope">
                        {{ scope.row.deptName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="今日入群/退群">
                    <template slot-scope="scope">
                        {{ scope.row.todayInRoomNum }} / {{ scope.row.todayOutRoomNum }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDetails(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 列表分页 -->
            <el-pagination
                background
                v-if="page.total > 0"
                class="madp-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </basic-container>
        <customerUser v-if="pageType == 1" :employeeId="employeeId" @goBack="goBack" />
        <statistical v-if="pageType == 2" :workRoomId="workRoomId" @goBack="goBack" />
    </div>
</template>
<script>
import customerUser from './customer-group-user.vue';
import statistical from './statistical.vue';
import { getBasicInfo, getGroupPage } from '@/api/customer-group/group-list';
import StatisticsCard from '@/components/statistics-card/';
export default {
    name: 'madp-customer-group-index',
    components: {
        customerUser,
        StatisticsCard,
        statistical
    },
    data() {
        return {
            // 群id、成员id
            workRoomId: '',
            employeeId: '',
            // 信息数据
            info: {},
            // 时间
            time: '2021-04-28 10:54:07',
            // 表格数据
            tableData: [],
            // loading开关
            loading: false,
            // 页面类型
            pageType: 0,
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 查询文本
            searchT: '',
            // 卡片信息
            cardInfo: [
                {
                    label: '客户群总数',
                    key: 'roomTotalCount',
                    color: '#FFD700'
                },
                {
                    label: '群客户总数',
                    key: 'roomContactTotalCount',
                    color: 'rgb(23, 115, 70)'
                },
                {
                    label: '客户群今日净增',
                    key: 'roomTodayNetAddedCount',
                    color: 'rgb(123, 215, 0)'
                },
                {
                    label: '群客户今日新增',
                    key: 'roomContactTodayAddedCount',
                    color: '#FF8C00'
                },
                {
                    label: '群客户今日流失',
                    key: 'roomContactTodayLossCount',
                    color: '#90EE90'
                },
                {
                    label: '今日入群客户人次',
                    key: 'todayJoinRoomContactCount',
                    color: 'rgb(223, 55, 70)'
                },
                {
                    label: '今日退群客户人次',
                    key: 'todayOutRoomContactCount',
                    color: '#00CED1'
                }
            ]
        };
    },
    created() {
        this.init();
        this.getList();
    },
    methods: {
        // 点击查询
        handleSearch(val) {
            if (val == 1) this.searchT = '';
            this.getList();
        },
        // 查看详情
        handleDetails(data) {
            this.employeeId = data.employeeId;
            this.pageType = 1;
        },
        // 返回
        goBack(val) {
            if (typeof val == 'number') {
                this.pageType = val;
            } else if (typeof val == 'object') {
                this.workRoomId = val.workRoomId;
                this.pageType = val.type;
            }
        },
        // 初始化
        init() {
            getBasicInfo().then((res) => {
                if (res.data.code != 0) return;
                this.info = res.data.data;
            });
        },
        // 获取表格数据
        getList(data) {
            if (!data) {
                this.page.current = 1;
            }
            const { current, size } = this.page;
            let obj = {
                current,
                size
            };
            if (this.searchT) obj.ownerName = this.searchT;
            this.loading = true;
            getGroupPage(obj)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code != 0) return;
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                    this.time = res.data.data.extraProps.syncWorkRoomTime;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getList(1);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getList(1);
        }
    }
};
</script>
<style scoped lang="scss">
.madp-total-info {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    &-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px;
        padding: 10px 16px;
        margin-bottom: 20px;
        .info-item {
            display: flex;
            min-width: fit-content;
            justify-content: flex-end;
            .p0 {
                min-width: fit-content;
                font-size: 18px;
                line-height: 38px;
            }
            .p1 {
                font-weight: bold;
                font-size: 24px;
                width: 60px;
                margin-left: 20px;
            }
            .p2 {
                width: 30px;
            }
        }
    }
}
.madp-search-form {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
    .madp-input {
        margin: 0 10px;
    }
    span {
        line-height: 36px;
        font-size: 14px;
    }
}
.madp-record-time {
    margin: 10px 0;
    text-align: right;
}
.madp-statistics-title {
    color: #333;
    font-weight: bold;
    font-size: 20px;
}
</style>
